<div class="modal-content">
  <form>
    <div class="modal-header">
      <h5 class="modal-title">{{ 'accessories.button_add_room' | translate }}</h5>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="modal"
        [attr.aria-label]="'form.button_close' | translate"
        (click)="dismissModal()"
      ></button>
    </div>
    <div class="modal-body">
      <div class="text-center mb-3">
        <i class="fas fa-folder-plus primary-text" style="font-size: 75px"></i>
      </div>
      <ul class="list-group list-group-box mb-0">
        <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
          <label for="form-name" class="mb-2 mb-md-0 w-100 w-md-50">{{ 'accessories.room_name' | translate }}</label>
          <div class="text-start text-md-end w-100 w-md-50">
            <input
              autocomplete="off"
              type="text"
              id="form-name"
              autofocus
              class="form-control custom-input"
              [(ngModel)]="roomName"
              [ngModelOptions]="{ standalone: true }"
              (keyup.enter)="closeModal(roomName)"
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="modal-footer justify-content-between">
      <div class="text-start">
        <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="dismissModal()">
          {{ 'form.button_close' | translate }}
        </button>
      </div>
      <div class="text-center"></div>
      <div class="text-end">
        <button
          type="button"
          class="btn btn-primary"
          data-bs-dismiss="modal"
          (click)="closeModal(roomName)"
          [disabled]="!roomName"
        >
          {{ 'form.button_save' | translate }}
        </button>
      </div>
    </div>
  </form>
</div>
